<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="generator" content="Jekyll v4.0.1">
    <title>预约</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.5/examples/checkout/">

    <!-- Bootstrap core CSS -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./layui/css/layui.css" rel="stylesheet">
    <script src="./js/form-validation.js"></script>
    <script src="./layui/layui.js"></script>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="./js/myjs/subscribe.js"></script>
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }
    </style>
    <!-- Custom styles for this template -->
    <link href="./css/form-validation.css" rel="stylesheet">
</head>
<body class="bg-light" >
<div class="container">
    <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="./img/register.svg" alt="" width="72" height="72">
        <h2>预约</h2>
        <p class="lead">请填写好下列信息，并准时在预定的时间前来注射疫苗。</p>
    </div>
    <form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">接种者姓名</label>
            <div class="layui-input-block">
                <input type="text" name="uName" placeholder="接种者姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">接种者年龄</label>
            <div class="layui-input-block">
                <input type="text" name="uAge" placeholder="接种者年龄" autocomplete="off" class="layui-input">
                    <select name="age" lay-filter="age" id="age" style="float: right">
                        <option value="岁">岁</option>
                        <option value="月">月</option>
                    </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男">
                <input type="radio" name="sex" value="女" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">接种者母亲姓名</label>
            <div class="layui-input-block">
                <input type="text" name="momName" placeholder="母亲姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="momPhone" placeholder="电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">接种者父亲姓名</label>
            <div class="layui-input-block">
                <input type="text" name="dadName" placeholder="父亲姓名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="dadPhone" placeholder="电话号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">住址</label>
            <div class="layui-input-block">
                <input type="text" name="address" placeholder="住址" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择疫苗</label>
            <div class="layui-input-block">
                <select name="vaccines" lay-filter="aihao" id="interest">

                </select>
            </div>
        </div>

        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <label class="layui-form-label">预约时间</label>
            <div class="layui-input-block">
            <input type="text" class="layui-input" id="time" name="time">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script>
        let item = sessionStorage.getItem("user");
        let user = JSON.parse(item);
        let uId = user.uId;
        layui.use(['form','laydate','layer'], function(){
            let form = layui.form;
            let laydate = layui.laydate;
            let layer = layui.layer;
            laydate.render({
                elem: '#time' //指定元素
            });
            //各种基于事件的操作，下面会有进一步介绍
            form.on('submit(*)', function(data){
                let field = data.field;
                let s = JSON.stringify(field);
                console.log(s)
                if (field.time<getNowDate()){
                    layer.msg("预约时间错误")
                    return false;
                }
                if (field.uName===""||field.sex===""||field.momName===""||field.address===""||field.dadName===""||field.dadPhone===""||field.momPhone===""||field.time===""||field.vaccines===""){
                    layer.msg("请将信息填写完整")
                    return false;
                }else {
                    $.post("/submit",{"vaccinator":s,"uId":uId},function (data) {
                        if (data.code===500){
                            layer.msg(data.msg)
                            return false;
                        }else {
                            window.location.href = "index.html";
                        }
                    })
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                }
            });
        });
    </script>
</div>
</body>
</html>
